<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <script src="../init.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Reading</h2>
  
<p>This code was updated from the Java source to work with Processing.js asynchronous image loading.</p>

<p>An image is recreated from its individual component colors.
The many colors of the image are created through modulating the 
red, green, and blue values. This is an exageration of an LCD display.</p>

<p><a href="http://processing.org/learning/basics/reading.html"><b>Original Processing.org Example:</b> Reading</a><br>
<script type="application/processing">
size(200, 200);
noStroke();
background(0);

// Load an image from the data directory
PImage c;
c = loadImage("data/cait.jpg", null, function(){

  int xoff = 0;
  int yoff = 0;
  int p = 2;
  int pix = p*3;


  for(int i = 0; i < c.width*c.height; i += 1) 
  {  
    int here = c.pixels[i];
    
    fill(red(here), 0, 0);
    rect(xoff, yoff, p, pix);
    
    fill(0, green(here), 0);
    rect(xoff+p, yoff, p, pix);
    
    fill(0, 0, blue(here));
    rect(xoff+p*2, yoff, p, pix);
    
    xoff+=pix;
    if(xoff >= width-pix) {
      xoff = 0;
      yoff += pix;
    }
  }

});
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"><img src='data/cait.jpg' id='cait.jpg'/></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
size(200, 200);
noStroke();
background(0);

// Load an image from the data directory
PImage c;
c = loadImage("cait.jpg");

int xoff = 0;
int yoff = 0;
int p = 2;
int pix = p*3;


for(int i = 0; i &lt; c.width*c.height; i += 1) 
{  
  int here = c.pixels[i];
  
  fill(red(here), 0, 0);
  rect(xoff, yoff, p, pix);
  
  fill(0, green(here), 0);
  rect(xoff+p, yoff, p, pix);
  
  fill(0, 0, blue(here));
  rect(xoff+p*2, yoff, p, pix);
  
  xoff+=pix;
  if(xoff &gt;= width-pix) {
    xoff = 0;
    yoff += pix;
  }
}</pre>
</body>
</html>
